import React, { Component } from 'react'
import { Link, Route, Switch, Redirect } from 'react-router-dom'

import Details from './Details'
export default class Message extends Component {
  state = {
    messageArr: [
      { id: 1, title: '消息1', count: '你好，佳佳' },
      { id: 2, title: '消息2', count: '你好，蕾蕾' },
      { id: 3, title: '消息3', count: '你好，磊磊' }
    ]
  }
  showDetail = (id,title)=>{
    // this.props.history.push(`/home/message/details/${id}/${title}`)
    this.props.history.push(`/home/message/details`,{id,title})
  }
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {messageArr.map(item => {
            return (
              <li key={item.id}>
                {/* 传递params参数 */}
                {/* <Link to={`/home/message/details/${item.id}/${item.title}`}>{item.title}</Link> */}
                {/* 传递search参数 */}
                {/* <Link to={`/home/message/details/?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}
                {/* 传递state参数 */}
                {/* <Link replace={true} to={{pathname:'/home/message/details',state:{id:item.id,title:item.title}}}>{item.title}</Link> */}
                <button onClick={()=>{this.showDetail(item.id,item.title)}}>{item.title}</button>
              </li>
            )
          })}
        </ul>
        <hr />
        {/* 接受params参数 */}
        {/* <Route path="/home/message/details/:id/:title" component={Details}/> */}
        {/* 接受search参数 */}
        {/* <Route path="/home/message/details" component={Details}/> */}
        {/* 接受state参数 */}
        <Route path="/home/message/details" component={Details} />
      </div>
    )
  }
}
